<template>
  <!-- 表单 -->
  <el-form ref="addForm" :model="formData" :rules="rules" label-width="120px">
    <el-form-item prop='username' label="姓名">
      <el-input  v-model="formData.username" style="width:80%" placeholder="请输入姓名" />
    </el-form-item>
    <el-form-item prop='mobile' label="手机">
      <el-input v-model="formData.mobile" style="width:80%" placeholder="请输入手机号" />
    </el-form-item>
    <el-form-item prop='timeOfEntry' label="入职时间">
      <el-date-picker v-model="formData.timeOfEntry" style="width:80%" placeholder="请选择入职时间" />
    </el-form-item>
    <el-form-item prop='formOfEmployment' label="聘用形式">
      <el-select v-model="formData.formOfEmployment" style="width:80%" placeholder="请选择" >
         <el-option label="正式" value="正式"></el-option>
         <el-option label="非正式" value="非正式"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item prop='workNumber' label="工号">
      <el-input v-model="formData.workNumber" style="width:80%" placeholder="请输入工号" />
    </el-form-item>
    <el-form-item prop='departmentName' label="部门">
      <el-input @focus="handleTree" v-model="formData.departmentName" style="width:80%" placeholder="请选择部门" />
      <div style="hight: 200px; overflow: scroll" v-if="showTree"><el-tree default-expand-all  :data="tabledata" :props="defaultProps" @node-click="handleNodeClick"></el-tree></div>
      
    </el-form-item>
    <el-form-item prop='correctionTime' label="转正时间">
      <el-date-picker v-model="formData.correctionTime" style="width:80%" placeholder="请选择转正时间" />
    </el-form-item>
    <el-form-item>
    <el-button @click="canle">取 消</el-button>
    <el-button @click="submitHandle" type="primary" >确 定</el-button>
   </el-form-item>
  </el-form>
</template>

<script>
import {getDepartments} from '@/api/departments'
import {toDo,toDo2} from "@/utils"
import {addEmployee} from "@/api/employees"
export default {
  name: 'VueAdminTemplateMasterEmpdialog',
props:{
    dialogVisible:{
      type:Boolean
    }
},
  data() {
    return {
      formData: {
      username: '',         // 用户名
      mobile: '',           // 手机号
      formOfEmployment: '', // 聘用形式
      workNumber: '',       // 工号
      departmentName: '',   // 部门
      timeOfEntry: '',      // 入职时间
      correctionTime: ''    // 转正时间
    },
    rules:{
       username: [
    { required: true, message: '用户姓名不能为空', trigger: 'blur'},
    { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }
  ],
  mobile: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  formOfEmployment: [
    { required: true, message: '聘用形式不能为空', trigger: 'blur' }
  ],
  workNumber: [
    { required: true, message: '工号不能为空', trigger: 'blur' }
  ],
  departmentName: [
    { required: true, message: '部门不能为空', trigger: 'change'}
  ],
  timeOfEntry: [
    { required: true, message: '请选择入职时间', trigger: 'blur' }
  ]
    },
    tabledata:[],
    showTree:false,
    defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },

  mounted() {
    
  },
created () {
  this.cnm()
  
},
  methods: {
    handleTree(){
     this.showTree=true
    },
   async cnm(){
      const res=await getDepartments()
      this.tabledata=toDo2(res.data.depts) 
      // console.log(res.data.depts);
    },
    handleNodeClick(data){
      // console.log(data,12345);
      if(data.name){
        this.showTree=false
      }
      this.formData.departmentName=data.name
    },
    canle(){
      this.$emit('update:dialogVisible',false)
    },
   async submitHandle(){
     const res=await addEmployee(this.formData)
     this.success()
    },
    success(){
      this.$emit('success')
    }
  },
};
</script>

<style lang="scss" scoped>

</style>